<script setup>
import { carouselMap } from '@/stores/videoData.js'
import { preloadImage } from '@/utils/tool.js';
import { useRouter } from 'vue-router';

const router = useRouter()
let currentIndex = ref(1)


/** 监听轮播图实时切换背景图 */
const currentBgUrl = computed(() => {
  return `url(${carouselMap[currentIndex.value].url})`
})

function watchCarousel(val) {
  setTimeout(() => {
    currentIndex.value = val
  }, 100)
}

/** 视频跳转点击事件 */
const toVideoClass = (val) => {
  if (val === 2) {
    router.push({ path: '/NotFound' })

  }
  else {
    router.push({ path: '/VideoClass', query: { 'subject': val } })
  }
}

onMounted(() => {
  carouselMap.forEach(item => {
    preloadImage(item.url)
  });
})
</script>

<template>
  <v-container fluid class="d-flex flex-column container">
    <div :style="{ backgroundImage: currentBgUrl }" class="bgImg" />
    <v-row>
      <v-carousel cycle height="400" hide-delimiters hide-delimiter-background show-arrows="hover"
        @update:modelValue="watchCarousel" style="margin: auto;">
        <v-carousel-item v-for="(item, index) in carouselMap" :key="index" :value="index">
          <v-sheet class="carousel" :style="{ backgroundImage: 'url(' + item.url + ')' }"
            @click="toVideoClass(index)" />
        </v-carousel-item>
      </v-carousel>
    </v-row>
  </v-container>
</template>


<style scoped>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
  background-position: center;
  background-size: cover;
}

.bgImg {
  width: 100%;
  height: 100vh;
  position: absolute;
  background-position: center;
  background-size: cover;
  top: 0;
  left: 0;
  filter: blur(10px);
}

.carousel {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  cursor: pointer;
}
</style>